<template>
	<view class="universal-detail">
		<view class="universal-detail-top">
			<view class="universal-detail-top-time">
				<text class="universal-detail-top-title">处理</text>
				{{ model.finishTime }}
			</view>
			<view class="universal-detail-top-username">处理人：{{ model.assignedHandlerName }}</view>
		</view>

		<view class="universal-detail-cont">
			<view class="universal-detail-item">
				<view class="universal-detail-item-title">处理方式及结果：</view>
				<view class="universal-detail-item-cont">{{ model.repairResult }}</view>
				<!-- <van-text-ellipsis class="universal-detail-item-cont" :content="model.repairResult" /> -->
			</view>
			<view class="universal-detail-item">
				<view class="universal-detail-item-title">{{ _typeName }}后照片：</view>
				<view class="universal-detail-list">
					<image v-for="(image, index) in model.imagesUrl2" :src="image.url" mode="aspectFit"
						@click="handleImagePreview(image.url, index)" class="universal-detail-list-image"></image>
				</view>
			</view>
			<view class="universal-detail-item">
				<view class="universal-detail-item-title">{{ _typeName }}后视频：</view>
				<view class="universal-detail-list">
					<video-preview v-for="(image, index) in model.videosUrl2" :src="image.url" />
					<view v-if="!model.videosUrl2?.length">-</view>
				</view>
			</view>
			<view class="universal-detail-item">
				<view class="universal-detail-item-title">{{ _typeName }}部位：</view>
				<!-- <van-text-ellipsis class="universal-detail-item-cont" :content="model.finishTimeStr" /> -->
			</view>
			<view class="w-full parts">
				<view v-for="(item, index) in model.parts" :key="index" class="item">
					<view class="name">
						<view class="label">设备：</view>
						{{ item.repairEquipmentName || '-' }}
					</view>
					<view class="part">
						<view class="label">部位：</view>
						{{ item.repairPart || '-' }}
					</view>
					<view class="content">
						<view class="label">内容：</view>
						{{ item.repairContent || '-' }}
					</view>
				</view>
				<!-- <van-cell-group>
					<van-cell v-for="(item, index) in model.parts" :key="index" :title="item.repairEquipmentName"
						:value="item.repairPart" :label="item.repairContent" />
				</van-cell-group> -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';

	import {
		showImagePreview
	} from 'vant';

	const model = defineModel();

	const _typeName = computed(() => {
		const typeMap = {
			'1': '维修',
			'2': '养护',
		};
		return typeMap[model.value.type?.value] || '';
	});

	const handleImagePreview = (imageUrl, index) => {
		showImagePreview({
			images: [imageUrl],
			startPosition: index,
			closeOnClickImage: false,
		})
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/universal-detail.scss';

	.detail {
		.universal-detail {
			.universal-detail-item {
				width: 100%;
			}
		}
	}

	.parts {
		.item {
			padding: 10rpx 24rpx;
			border-bottom: 1rpx solid #ccc;
			color: #666;

			.name,
			.part,
			.content {
				display: flex;
				overflow-wrap: break-word;
			}
		}

		.label {
			flex-shrink: 0;
			flex-grow: 0;
			color: #555;
		}
	}
</style>